<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/vehicle' }">车辆管理</el-breadcrumb-item>
                <el-breadcrumb-item>车辆位置</el-breadcrumb-item>
            </el-breadcrumb>

            <el-row class="mt20">
                <baidu-map id="allmap"
                           ak="0MA953dkYQM4fQriWe6NaII8QpjeCCZh" :zoom="center.zoom"
                           :center="center" @ready="handler"
                           :scroll-wheel-zoom="true">
                    <!-- bm-marker 就是标注点 定位在point的经纬度上 跳动的动画 -->
                    <bm-marker :position="center" animation="BMAP_ANIMATION_BOUNCE"
                               :icon="{url: 'http://192.168.0.164:8080/static/picture/2af1924e-c22f-4627-83db-c0a84c4a9458.png', size: {width: 53, height: 35}}">
                    </bm-marker>
                    <!--比例尺控件-->
                    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                    <!--缩放控件-->
                    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
                </baidu-map>
            </el-row>


        </div>
    </div>
</template>

<script>

    import {viewVehicle} from '@/api';
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

    export default {
        name: 'index1',
        components: {
            BaiduMap,
        },
        data() {
            return {

                //地图变量
                center: {
                    lat: '31.780393',
                    lng: '117.350768',
                    zoom: 18,
                },
            }
        },
        methods: {

            //地图ready事件
            handler({BMap, map}) {
                viewVehicle({id: this.$route.query.id}).then(res => {
                    if (res.code == 200) {
                        if (res.data.lat != 0 && res.data.lng != 0) {
                            this.center.lat = res.data.lat
                            this.center.lng = res.data.lng
                        } else {
                            this.$message.warning('请确认经纬度是否推送正确')
                        }
                    }
                })

            },
        },
        mounted() {

        }
    };
</script>

<style scoped>
    /* 设定地图的大小 */
    #allmap {
        height: 700px;
        width: 100%;
        margin: 0 auto;
    }
</style>
